<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018-12-21
  Time: 下午 2:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <title>Title</title>
    <script src="../../js/jquery-3.3.1.min.js" charset="utf-8"></script>
    <script src="../../js/cookie/jquery.cookie.js" charset="utf-8"></script>
    <script src="../../layui-v2.4.5/layui/layui.js" charset="utf-8"></script>
    <script src="/js/layui/form_verify.js"></script>
    <link rel="stylesheet" href="../../layui-v2.4.5/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-upload">
    <button type="button" class="layui-btn" id="test1">替换图片</button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button" class="layui-btn layui-btn-danger" id="delImg" onclick="delImgById()">删除图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="demo1" src="${imgRecord.path}"
             style="height: 13rem;width: 22rem">
        <p id="demoText"></p>
    </div>
</div>
<div>

    <input type="text" name="number" id="number" required  style="height: 2.3rem" value="${imgRecord.number}"  placeholder="请输入序号">
    <button type="button" class="layui-btn" id="tihuan" onclick="saveImgNumber()">保存序号</button>
</div>
<script>
    layui.use('upload', function(){
        var $ = layui.jquery
        ,upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/shop/slideshowUpload?commodityId=${imgRecord.commodityId}&id=${imgRecord.id}'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res!=0){
                    return layer.msg('上传失败');
                }
                if(res== 0){

                    return layer.msg('上传成功');
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });


        });
    //saveImgNumber

    function saveImgNumber(){
        $.ajax({
            url:'/shop/saveImgNumber',
            type:'POST', //GET
            async:true,    //或false,是否异步
            data:{
                id:'${imgRecord.id}',
                number:$("#number").val()
            },
            timeout:5000,    //超时时间
            dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend:function(xhr){
                /*console.log(xhr)
                console.log('发送前')*/
            },
            success:function(data){
                console.log(data);
                if (data.code=='000000'){
                    layer.msg(data.msg,{time:1000,icon: 6},function () {
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        //parent.layer.close(index);
                    });
                }else {
                    layer.msg(data.msg,{time:1000,icon: 5});
                }
            },
            error:function(xhr,textStatus){
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            },
            complete:function(){
                //console.log('结束')
            }
        })
    };


    function delImgById() {
        $.ajax({
            url:'/shop/delImgById',
            type:'POST', //GET
            async:true,    //或false,是否异步
            data:{
                id:'${imgRecord.id}',
            },
            timeout:5000,    //超时时间
            dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend:function(xhr){
                /*console.log(xhr)
                console.log('发送前')*/
            },
            success:function(data){
                console.log(data);
                if (data.code=='000000'){
                    layer.msg(data.msg,{time:1000,icon: 6},function () {
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        //parent.layer.close(index);
                    });
                }else {
                    layer.msg(data.msg,{time:1000,icon: 5});
                }
            },
            error:function(xhr,textStatus){
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            },
            complete:function(){
                //console.log('结束')
            }
        })
    }


</script>
</body>
</html>
